<!-- 一级上侧分类模板 -->
<template>
  <div class="template-body" :style="[{ height: contentHeight }]">
    <div
      class="header-nav"
      :style="[{ top: 'calc(' + statusBarHeight + 'px + 88rpx);' }]"
    >
      <headerNav
        :propsData="propsData"
        :dataList="dataList"
        @navChange="navChange"
      ></headerNav>
    </div>
    <view class="hold-place"></view>
    <scroll-view
      scroll-y="true"
      @scrolltolower="scrollToBottom"
      class="template-content"
    >
      <div class="ad-box">
        <classifyAd :propsData="propsData"></classifyAd>
      </div>
      <div class="lable-title" v-if="styleType == 1">
        <span>常用分类</span>
        <i class="iconfont icon-weibiaoti-13"></i>
      </div>
      <section class="goods-section">
        <goodsList :propsData="propsData" :goodsList="goodsList"></goodsList>
      </section>
    </scroll-view>
  </div>
</template>

<script>
import headerNav from "../components/headerNav/index.vue";

import classifyAd from "../components/classifyAd/index.vue";
import goodsList from "../components/goodsList/index.vue";
import { diySysPageMixin } from "../../../mixins/index";

export default {
  name: "",
  props: {
    propsData: {
      type: Object,
      default: {},
    },
    contentHeight: {
      type: String,
      default: "",
    },
    catList: {
      type: Array,
      default: [],
    },
  },
  mixins: [diySysPageMixin], //混入文件
  components: { headerNav, classifyAd, goodsList },
  data() {
    return {
      dataList: [],
      goodsList: [],
      menuList: [],
      page: 1,
      totalCount: 0,
      currentId: 0,
    };
  },
  mounted() {
    this.initData();
  },
  watch: {},
  computed: {
    styleType() {
      return this.propsData.params.styleType || "1";
    },
  },
  methods: {
    initData() {
      this.dataList = this.catList;
      this.menuList = this.catList;
    },
    getGoodsList(id, isLoad = false) {
      this.currentId = id;
      this.$allrequest.classification
        .goodsList(
          {
            cat_id: id,
            page: this.page,
            limit: 10,
          },
          true
        )
        .then((res) => {
          if (!res.code) {
            if (isLoad) {
              this.goodsList = [...this.goodsList, ...res.data.list];
            } else {
              this.goodsList = res.data.list;
            }
            this.totalCount = res.data.row_count;
          }
        });
    },
    navChange(e) {
      let id = e.id;
      this.goodsList = [];
      this.page = 1;
      this.getGoodsList(id);
    },
    scrollToBottom() {
      if (this.page * 10 >= this.totalCount) return;
      this.page++;
      this.getGoodsList(this.currentId, true);
    },
  },
};
</script>

<style lang="scss" scoped>
.template-body {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  .header-nav {
    width: 100%;
    z-index: 111;
  }
  .template-content {
    flex: auto;
    height: 0;
    width: 100%;
    margin-top: 6px;
    background: #ffffff;
    .ad-box {
      width: 100%;
      background: #ffffff;
      position: relative;
      z-index: 20;
    }
    .goods-section {
      width: 100%;
      // height: 100%;
      padding: 0 32rpx;
    }
    .lable-title {
      width: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 14rpx 32rpx 0;
      span {
        font-size: 28rpx;
        font-family: PingFang SC;
        font-weight: 600;
        color: #262626;
      }
      .iconfont {
        color: #888888;
        font-size: 24rpx;
        display: block;
        transform: scale(0.8);
      }
    }
  }
  .template-content::-webkit-scrollbar {
    width: 0;
    height: 0;
  }
}
</style>
